﻿@model AdminHomeModel
@{
    var message = ViewData["Message"] == null ? "[]" : Colorful.JsonHelper.ToJson(ViewData["Message"]);
    var icons = ViewData["Icons"] == null ? "[]" : Colorful.JsonHelper.ToJson(ViewData["Icons"]);
    var cityData = ViewData["CityDatas"] == null ? "[]" : Colorful.JsonHelper.ToJson(ViewData["CityDatas"]);
}
@section style {
    <style>
        html, body, #app { height: 100%; }
        .page { padding:0; }
        .web-stat-title a { display: inline-block; padding: 4px 6px; margin: 0 10px 0 0 !important; }
            .web-stat-title a.am-active { background-color: #0e90d2; border-radius: 4px; color: #FFF; }
        .chart-type button.am-active { border-color: #0e90d2; background-color: #0e90d2; color: #FFF; box-shadow: none; }
    </style>
}
<div id="app" v-cloak>
    <Console ref="console" :config="config" :menus="menus" :show-nav-photo="@ViewData["ShowNavPhoto"].ToString().ToLower()">
        <div slot="setting_tab1">
            <h3>常用菜单</h3>
            <ul class="am-nav">
                <li>
                    <a href="/" target="_blank">
                        <i class="am-icon-home"></i>网站首页
                    </a>
                </li>
                <li>
                    <a href="javascript;" @@click="handleShowProfile">
                        <i class="am-icon-user"></i>个人信息
                    </a>
                </li>
                <li>
                    <a href="@Model.LogoutUrl">
                        <i class="am-icon-power-off"></i>退出登录
                    </a>
                </li>
            </ul>
        </div>
        @if (Model.DefaultUrl == "console")
        {
        <Dashboard url-prefix="@Model.UrlPrefix" :icons="icons" :config="dashboardConfig">
            @if (ViewData["Dashboard"] != null)
            {
                @Html.PartialAsync((string)ViewData["Dashboard"])
            }
            else if (ViewData["uvpv"] != null)
            {
                    <Box slot="charts" icon="line-chart" style="border:1px solid #ebebeb;box-shadow:none">
                        <span slot="title" class="web-stat-title">
                            访问统计：<a @@click="handleQuery(0)" :class="{'am-active':selectDate==0}">今天</a>
                            <a @@click="handleQuery(1)" :class="{'am-active':selectDate==1}">昨天</a>
                            <a @@click="handleQuery(7)" :class="{'am-active':selectDate==7}">最近7天</a>
                            <a @@click="handleQuery(30)" :class="{'am-active':selectDate==30}">最近30天</a>
                        </span>
                        <div class="am-text-center chart-type">
                            <button-group skin="default" shape="radius" size="sm">
                                <i-button @@click="handleChart('pv')" :class="{'am-active':chartType==='pv'}">浏览量(PV)</i-button>
                                <i-button @@click="handleChart('uv')" :class="{'am-active':chartType==='uv'}">访客数(UV)</i-button>
                                <i-button @@click="handleChart('ip')" :class="{'am-active':chartType==='ip'}">IP数</i-button>
                                <i-button @@click="handleChart('nu')" :class="{'am-active':chartType==='nu'}">新增用户</i-button>
                            </button-group>
                        </div>
                        <Chart ref="chart" theme="macarons" style="min-height:350px"></Chart>
                    </Box>
            }
        </Dashboard>
        }
    </Console>
</div>
@section script {
    @Html.GetChartScripts()
    @if (cityData != "[]")
    {
        <script src="@Html.GetRes("lib/echarts/map/js/china.js")"></script>
    }
    <script>var __mixins = null</script>
        <script>
        var _chart = function () {
            var getMax = function () {
                let max = 0;
                for (let i = 0; i < cityData.length; i++) {
                    if (cityData[i].value > max) max = cityData[i].value;
                }
                return max;
            };
            var convertData = function (data) {
                let res = [];
                let len = data.length;
                for (var i = 0; i < len; i++) {
                    var geoCoord = geoCoordMap[data[i].name];
                    if (geoCoord) {
                        res.push({
                            name: data[i].name,
                            value: geoCoord.concat(data[i].value)
                        });
                    }
                }
                return res;
            };
            this.config = {
                table: {
                    columns: [
                        { title: "地区", key: "name" },
                        { title: "流量", key: "value", sortable: true }
                    ],
                    data: @Html.Raw(cityData)
                },
                option: {
                    backgroundColor: "#FFF",
                    tooltip: {
                        trigger: "item",
                        formatter: function (params) {
                            return params.name + " : " + params.value[2];
                        }
                    },
                    visualMap: {
                        left: '10%',
                        min: 0,
                        max: getMax(),
                        calculable: true,
                        inRange: {
                            color: ["#50a3ba", "#eac736", "#d94e5d"]
                        },
                        textStyle: {
                            color: "#000"
                        }
                    },
                    geo: {
                        map: "china",
                        top: 0,
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                areaColor: "#EFEFEF",
                                borderColor: "#CCC"
                            },
                            emphasis: {
                                areaColor: "#E5E5E5"
                            }
                        }
                    },
                    series: [
                        {
                            type: "scatter",
                            coordinateSystem: "geo",
                            data: convertData(cityData),
                            symbolSize: function (val) {
                                return val[2] / 10;
                            },
                            label: {
                                normal: {
                                    formatter: "{b}",
                                    position: "right",
                                    show: false
                                },
                                emphasis: {
                                    show: true
                                }
                            },
                            itemStyle: {
                                normal: {
                                    color: "#0099CC"
                                }
                            }
                        }
                    ]
                }
            };
        }
        var vm = new Vue({
            el: '#app',
            mixins: __mixins,
            data: {
                chartType: 'pv',
                selectDate: 0,
                config: {
                    title: '@Html.Raw(Model.WebSetting.AdminTitle)' //标题
                    , logo: '/images/logo.png' //Logo
                    , user: {
                        name: '@Html.Raw(Model.User.Nickname)',
                        photo: '@Html.Raw(Model.User.Photo)'
                    }
                    //默认打开的菜单
                    , defaultMenu: { id: 0, text: '管理首页',  url: '@Model.DefaultUrl', showClose: false, icon: 'home' }
                    //右上角菜单
                    , userMenus: [
                        { id: 1000, text: '用户信息', url: '@Model.ProfileUrl', icon: 'user' },
                        { id: 1001, text: '修改密码', url: '@Model.ProfileUrl', icon: 'edit' }
                    ],
                    logoutUrl: '@Model.LogoutUrl'
                },
                 //消息提醒
                message: @Html.Raw(message),
                //头部图标列表
                icons: @Html.Raw(icons),
                //仪表盘配置
                dashboardConfig: {
                    photo: "@Html.Raw(Model.User.Photo)",
                    name: "@Html.Raw(Model.User.Nickname)",
                    role: "@Html.Raw(ViewData["Roles"])",
                    lastLogin: "@Model.User.LastLogin.ToString("yyyy-MM-dd HH:mm:ss")",
                    lastLoginPlace: "@Html.Raw(Model.User.LastPlace)",
                    charts: @Html.GetString(cityData=="[]","null", "chart.config")
                },
                menus: @Html.ToJson(Model.Menus)
            },
            methods: {
                handleChart: function (type) {
                    this.chartType = type;
                    var data;
                    if (type === 'pv')
                        data = this.chartData.pv;
                    else if (type === 'uv')
                        data = this.chartData.uv;
                    else if (type === 'nu')
                        data = this.chartData.nu;
                    else
                        data = this.chartData.ip;
                    var chartOption = {
                        tooltip: {
                            trigger: 'axis'
                        },
                        calculable: true,
                        grid: {
                            x: 30,
                            y: 30,
                            x2: 30,
                            y2:30
                        },
                        xAxis: [
                            {
                                type: 'category',
                                boundaryGap: false,
                                data: this.chartData.x
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                type: 'line',
                                smooth: true,
                                itemStyle: { normal: { areaStyle: { type: 'default' } } },
                                data: data
                            }
                        ]
                    };
                    this.$refs.chart.setOption(chartOption);
                },
                handleQuery: function (dateRange, type) {
                    this.selectDate = dateRange;
                    var self = this;
                    $.post('@ViewData["uvpv"]', { dateRange: this.selectDate }, function (result) {
                        if (result.succ) {
                            self.chartData = result.data;
                            self.handleChart(self.chartType);
                        } else { self.$Message.error(result.data); }
                    });
                },
                handleShowProfile() {
                    selectMenu(this.config.userMenus[0]);
                }
            },
            mounted() {
                $(window.document.documentElement).addClass('console');
                if ("@ViewData["uvpv"]" != "")
                    this.handleQuery(0);
            }
        });
        function selectMenu(menu) {
            vm.$refs.console.selectMenu(menu);
        }
        </script>
}